<template>
  <div id="articleDetails" v-if="videoInfo">
    <Header :user_img="userInfo.user_img" v-if="userInfo"/>

    <div class="videoBox">
      <video
        :src="videoInfo.content"
        controls
        poster="@/assets/videoCover.png"
      />
    </div>

    <!-- Tab标签栏 -->
    <van-tabs
      v-model="active"
      color="skyblue"
      swipeable
      sticky
      animated
      line-height="0.556vw"
    >
      <van-tab title="简介">
        <!-- 简介 -->
        <Introduction :videoInfo="videoInfo" :commend="commend"/>
      </van-tab>
    
      <van-tab title="评论">
        <!-- 评论 -->
        <Comment :userInfo="userInfo"/>
      </van-tab>
    </van-tabs>

    <van-overlay :show="show">
      <van-loading type="spinner" class="loading"/>
    </van-overlay>
  </div>
</template>

<script>
import Header from "@/components/common/Header.vue";
import Introduction from "@/components/article/Introduction.vue";
import Comment from "@/components/article/Comment.vue";

export default {
  components: {
    Header,
    Introduction,
    Comment,
  },
  data() {
    return {
      userInfo:null,
      videoInfo: null,
      commend:null,
      active: 0 ,
      show:false
    };
  },
  created() {
    this.getUserInfo();
    // 获取视频信息
    this.getVideoInfo();
    // 获取推荐视频信息
    this.getCommend();
  },
  methods: {
    async getUserInfo() {
      // 判断是否登录来获去用户信息
      if (localStorage.getItem("id") && localStorage.getItem("token")) {
        let res = await this.$http.get(`/user/${localStorage.getItem("id")}`);
        this.userInfo = res.data[0];
      }
    },
    async getVideoInfo() {
      let Id = this.$route.params.id;
      let res = await this.$http.get(`/article/${Id}`);
      this.videoInfo = res.data[0];
    },
    async getCommend(){
      let res = await this.$http.get("/commend");
      this.commend = res.data;
      // 关闭遮罩层
      this.show=false;
    }
  },
  watch:{
    // 点击推荐视频时重新加载相关信息
    $route(){
      this.show=true
      this.getVideoInfo();
      this.getCommend();
    }
  }
};
</script>

<style lang="less" scoped>
#articleDetails {
  .videoBox {
    margin-top: 0.556vw;
    width: 100%;
    video {
      margin: 0;
      width: 100%;
      outline: none;
    }
  }
  .loading{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
}
</style>
